<template>
  <div class="container">
    <div class="body-top">
      <div class="top-title">调查评估</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="问卷调查" name="first">
        <Questionnaire v-if="activeName === 'first'"></Questionnaire>
        </el-tab-pane>
        <el-tab-pane label="工作评估" name="second">
        <Work v-if="activeName === 'second'">></Work>
        </el-tab-pane>
        <el-tab-pane label="题库管理" name="third">
        <Question-bank v-if="activeName === 'third'">></Question-bank>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

import QuestionBank from "./QuestionBank";
import Questionnaire from "./Questionnaire";
import Work from "./Work";

export default {
  components: {
     QuestionBank,
     Questionnaire,
     Work
  },
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
    }
  }
};
</script>
<style lang="less" scoped>
.body-top {
  .top-title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 28px;
    padding-left: 10px;
  }
}
/**tab-every */
/deep/.el-tabs__item {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
  margin-top: 14px;
}
/**tab底下1px线 */
/deep/.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}
/deep/.el-tabs__nav,
.is-top {
  margin-left: 9px;
}
/deep/#tab-second {
  padding-left: 40px;
  padding-right: 40px;
}
</style>